<script setup lang="ts">
import { ref, onMounted } from 'vue'
import city from '../lib/city.ts'
import province from '../lib/province.json'
import { City } from './type'

// 给父组件分发事件
let emits = defineEmits(['changeCity', 'changeProvince'])

// 父组件选择结果
let result = ref<string>('请选择')
// 弹出框是否显示
let visible = ref<boolean>(false)
// 选择类型值
let radioValue = ref<string>('按城市')
// 搜索框值
let selectValue = ref<string>('')
// 获取城市数据
let cities = ref(city.cities)
// 获取城市数据
let provinces = ref(province)
// 省份下拉数据
const options = ref<City[]>([])
// 搜索框值
let searchValue = ref<string>('')
// 所有的城市数据
let allCities = ref<City[]>([])

// 字母点击事件
let clickChat = (item: string) => {
  let el = document.getElementById(item)
  if (el) {
    el.scrollIntoView()
  }
}

// 城市项点击事件
let clickItem = (item: City) => {
  // 给结果赋值
  result.value = item.name
  // 关闭弹出层
  visible.value = false
  // 分发事件
  emits('changeCity', item.name)
}

// 按省份城市项点击事件
let clickProvice = (item: string) => {
  // 给结果赋值
  result.value = item
  // 关闭弹出层
  visible.value = false
  // 分发事件
  emits('changeProvince', item)
}

onMounted(() => {
  // 初始化省份下拉数据
  let values = Object.values(cities.value).flat(2)
  options.value = values
  allCities.value = values
})

// 自定义搜索方法
let filterMethod = (val: string) => {
  searchValue.value = val
  let values = Object.values(cities.value).flat(2)
  if (val === '') {
    options.value = values
  } else {
    if (radioValue.value === '按城市') {
      // 中文和拼音一起过滤
      options.value = values.filter(item => {
        return (
          item.name.includes(val) ||
          item.spell.includes(val) ||
          item.spell.toLowerCase().includes(val)
        )
      })
    } else {
      // 只过滤中文
      options.value = values.filter(item => {
        return item.name.includes(val)
      })
    }
  }
}

// 下拉框选择
let changeSelect = (val: number) => {
  let city = allCities.value.find(item => item.id === val)!
  result.value = city.name
  if (radioValue.value === '按城市') {
    emits('changeCity', city.name)
  } else {
    emits('changeProvince', city.name)
  }
}
</script>

<template>
  <el-popover
    v-model:visible="visible"
    placement="bottom-start"
    :width="500"
    trigger="click"
  >
    <template #reference>
      <div class="result">
        <div>{{ result }}</div>
        <div>
          <el-icon-arrowdown :class="{ rotate: visible }"></el-icon-arrowdown>
        </div>
      </div>
    </template>
    <div class="container">
      <el-row>
        <el-col :span="8" :offset="0">
          <el-radio-group v-model="radioValue">
            <el-radio-button label="按城市"></el-radio-button>
            <el-radio-button label="按省份"></el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="15">
          <el-select
            v-model="selectValue"
            placeholder="请搜索城市"
            filterable
            :filter-method="filterMethod"
            @change="changeSelect"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <template v-if="radioValue === '按城市'">
        <div class="city">
          <!-- 字母区域 -->
          <div
            class="city-item"
            @click="clickChat(item)"
            v-for="item in Object.keys(cities)"
          >
            {{ item }}
          </div>
        </div>
        <el-scrollbar max-height="300px">
          <template v-for="(value, key) in cities" :key="key">
            <el-row style="margin-bottom: 10px" :id="key">
              <el-col :span="2">{{ key }}:</el-col>
              <el-col :span="22" class="city-name">
                <div
                  @click="clickItem(item)"
                  class="city-name-item"
                  v-for="item in value"
                  :key="item.id"
                >
                  {{ item.name }}
                </div>
              </el-col>
            </el-row>
          </template>
        </el-scrollbar>
      </template>
      <template v-else>
        <div class="province">
          <div
            class="province-item"
            v-for="(item, index) in Object.keys(provinces)"
            :key="index"
            @click="clickChat(item)"
          >
            {{ item }}
          </div>
        </div>
        <el-scrollbar max-height="300px">
          <template
            v-for="(item, index) in Object.values(provinces)"
            :key="index"
            :index="String(index)"
          >
            <template v-for="(item1, index1) in item" :key="index1">
              <el-row style="margin-bottom: 10px" :id="item1.id">
                <el-col :span="3">{{ item1.name }}:</el-col>
                <el-col :span="21" class="province-name">
                  <div
                    class="province-name-item"
                    v-for="(item2, index2) in item1.data"
                    :key="index2"
                  >
                    <div @click="clickProvice(item2)">{{ item2 }}</div>
                  </div>
                </el-col>
              </el-row>
            </template>
          </template>
        </el-scrollbar>
      </template>
    </div>
  </el-popover>
</template>

<style lang="scss" scoped>
.result {
  display: flex;
  align-items: center;
  width: fit-content;
  cursor: pointer;
}

.rotate {
  transform: rotate(180deg);
}

svg {
  width: 1em;
  height: 1em;
  position: relative;
  top: 2px;
  margin-left: 4px;
  transition: all 0.25s linear;
}

.city,
.province {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 10px;

  .city-item,
  .province-item {
    padding: 4px 6px;
    margin-right: 8px;
    margin-bottom: 8px;
    border: 1px solid #eee;
    cursor: pointer;
  }
}

.city-name,
.province-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  &-item {
    margin-right: 6px;
    margin-bottom: 6px;
    cursor: pointer;
  }
}
</style>
